<!-- 司机详情 -->
<template>
  <div class="dashboard-container driver-detail">
    <el-tabs
      class="tabsTab"
      style="font-size: 18px"
      v-model="activeName"
      @tab-click="handleClick"
    >
      <!-- 基本信息 -->
      <el-tab-pane style="margin-left: 15px" label="基本信息" name="first">
        <el-form>
          <!-- 详情显示 -->
          <el-row :gutter="20" v-if="flag">
            <el-col :span="8">
              员工编号:<span style="padding-left: 25px">{{
                form && form.userId
              }}</span>
            </el-col>
            <el-col :span="8">
              司机名称:
              <span style="padding-left: 25px">{{ form && form.name }}</span>
            </el-col>
            <el-col :span="8">
              所属机构:<span style="padding-left: 25px">
                {{ agency.name }}</span
              >
            </el-col>
            <el-col :span="8"
              ><div class="bg-purpleOne">
                电话:<span style="padding-left: 58px">{{
                  form && form.mobile
                }}</span>
              </div></el-col
            ><el-col :span="8"
              ><div class="bg-purpleTwo">
                年龄:<span style="padding-left: 75px">{{
                  form && form.age
                }}</span>
              </div></el-col
            >
            <el-col>
              <el-col class="warning">
                <template>
                  <el-button type="warning" @click="flag = false"
                    >编辑</el-button
                  >
                </template>
              </el-col>
            </el-col>
          </el-row>
          <!-- 详情修改 -->
          <el-row :gutter="20" v-else class="Details-modification">
            <el-col :span="8">
              <el-form-item label="员工编号:">
                <el-input
                  v-model="form.userId"
                  :disabled="true"
                  style="width: 218px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="司机名称:">
                <el-input
                  v-model="form.name"
                  :disabled="true"
                  style="width: 218px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属机构:">
                <el-input
                  style="width: 218px"
                  v-model="form.agency.name"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电话:" style="padding-right: 15px">
                <el-input
                  v-model="form.mobile"
                  :disabled="true"
                  style="width: 218px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年龄:">
                <el-input v-model="form.age" style="width: 218px"></el-input>
              </el-form-item>
            </el-col>

            <el-col class="warning">
              <template>
                <el-button type="warning" @click="compile()">确定</el-button>
                <el-button type="warning" @click="flag = !flag">返回</el-button>
              </template>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>

      <!-- 驾驶证信息 -->
      <el-tab-pane label="驾驶证信息" name="second" style="margin-left: 15px">
        <el-form>
          <!-- 驾驶证编辑 -->
          <el-row :gutter="20" class="contentCol" v-if="flagShow">
            <el-col :span="8"
              ><div class="grid-content bg-purple" style="padding-top: 20px">
                驾驶证号:
                <span style="padding-left: 25px">{{
                  formList.licenseNumber
                }}</span>
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content bg-purple" style="padding-top: 20px">
                准驾车型:<span style="padding-left: 25px">
                  {{ formList.allowableType }}</span
                >
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content bg-purple" style="padding-top: 20px">
                初次领证日期:<span style="padding-left: 25px">
                  {{ formList.initialCertificateDate }}</span
                >
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content bg-purple" style="padding-top: 20px">
                驾驶证有效期限:
                <span style="padding-left: 10px">
                  {{ formList.validPeriod }}年</span
                >
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content bg-purple" style="padding-top: 20px">
                驾龄:<span style="padding-left: 25px">
                  {{ formList.driverAge }}年</span
                >
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content bg-purple" style="padding-top: 20px">
                驾驶证类型:<span style="padding-left: 30px">
                  {{ formList.licenseType }}</span
                >
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content bg-purple" style="padding-top: 20px">
                从业资格证:<span style="padding-left: 25px">
                  {{ formList.qualificationCertificate }}</span
                >
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content bg-purple" style="padding-top: 20px">
                入场证信息:<span style="padding: left 15px;px">
                  {{ formList.passCertificate }}</span
                >
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content bg-purple" style="padding-top: 20px">
                <span
                  >图片信息:
                  <div>
                    <img
                      v-for="(item, index) in pictureData"
                      :src="item"
                      :key="index"
                      style="width: 100px; height: 100px"
                      alt=""
                    />
                  </div>
                </span></div
            ></el-col>
            <el-col class="warningTwoShow">
              <el-button type="warning" @click="flagShow = false"
                >编辑</el-button
              >
            </el-col>
          </el-row>
          <!-- 驾驶证编辑修改-->
          <el-row :gutter="20" class="contentCol" v-else>
            <el-col :span="8">
              <el-form-item label="驾驶证号:">
                <el-input v-model="formList.licenseNumber" style="width: 214px">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="准驾车型:">
                <el-input
                  v-model="formList.allowableType"
                  style="width: 214px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="初次领证日期:">
                <el-input
                  style="width: 214px"
                  type="date"
                  placeholder="选择日期"
                  v-model="formList.initialCertificateDate"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="驾驶证有效期限:">
                <el-input v-model="formList.validPeriod" style="width: 214px"
                  >年</el-input
                >
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="驾龄:">
                <el-input v-model="formList.driverAge" style="width: 214px"
                  >年</el-input
                >
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="驾驶证类型:">
                <el-input
                  v-model="formList.licenseType"
                  style="width: 214px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="从业资格证:">
                <el-input
                  style="width: 214px"
                  v-model="formList.qualificationCertificate"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" class="ruchang">
              <el-form-item label="入场证信息:" style="padding-right: 25px">
                <el-input
                  v-model="formList.passCertificate"
                  style="width: 214px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              图片信息:
              <img
                v-for="(item, index) in pictureData"
                :src="item"
                :key="index"
                style="width: 100px; height: 100px"
                alt=""
              />
            </el-col>
            <el-col class="warningTwo">
              <el-button type="warning" @click="driverDetailList()"
                >保存</el-button
              >
              <el-button type="warning" @click="flagShow = !flagShow"
                >返回</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  driverDetail,
  driverDetailUpdate,
  driverLicenseDetail,
  driverLicenseDetailUpdate
} from '@/api/transit'
export default {
  data() {
    return {
      id: 0,
      activeName: 'first', // 默认选中
      active: 1, // 选中
      form: [], // 基本信息
      // 所属机构
      agency: {},

      flag: true, // 编辑
      formList: [], // 驾驶证信息
      imageUrl: '', // 图片
      flagShow: true, // 图片显示
      pictureData: [] // 图片信息
    }
  },
  created() {
    this.handle()
  },
  methods: {
    // 基本信息和驾驶证信息渲染

    async handle() {
      this.id = this.$route.params.id
      console.log('ids', this.id)
      const res = await driverDetail(this.$route.params.id)
      // 渲染司机的基本信息
      this.form = res.data
      console.log(this.form.userId, 'userId')
      console.log(this.form)
      // 渲染所属机构
      this.agency = res.data.agency
      // 获取驾驶证信息
      const result = await driverLicenseDetail(this.$route.params.id)
      console.log(result)
      // 渲染驾驶证信息
      this.formList = result.data
      this.pictureData = this.formList.picture.split(',')
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 编辑基本信息
    async compile() {
      const { age, agency, fleet, mobile, name, id, userId } = this.form
      const res = await driverDetailUpdate(this.$route.params.id, {
        age,
        agency,
        fleet,
        mobile,
        name,
        id,
        userId
      })
      this.form = res.data
      this.flag = !this.flag
      this.$message({
        message: '编辑成功',
        type: 'success'
      })
      this.handle()
    },

    // 更新驾驶证信息
    async driverDetailList() {
      const {
        licenseNumber,
        allowableType,
        initialCertificateDate,
        validPeriod,
        driverAge,
        licenseType,
        qualificationCertificate,
        passCertificate,
        id
      } = this.formList
      // 获取驾驶证信息 并且传给接口需要的数据
      const res = await driverLicenseDetailUpdate({
        licenseNumber,
        allowableType,
        initialCertificateDate,
        validPeriod,
        driverAge,
        licenseType,
        qualificationCertificate,
        passCertificate,
        id
      })
      console.log(res)
      //
      // this.flagShow = res.datasa
      this.flagShow = !this.flagShow
      console.log(this.flagShow)

      this.$message({
        message: '编辑成功',
        type: 'success'
      })
      this.handle()
    }
  }
}
</script>

<style lang="scss" scoped>
.ruchang {
  padding-left: 50px;
}
.active {
  color: #ff643d;
}
.tabsTab {
  margin: 20px;
  padding-left: 50px;

  width: 98%;
  height: 644px;
  background: #ffffff;
}
.bg-purpleOne {
  padding-top: 30px;
}
.bg-purpleTwo {
  padding-top: 20px;
}
.warning {
  margin-top: 300px;
  margin-left: 500px;
}
.warningTwo {
  margin-top: 15px;
  margin-left: 500px;
}
// 上传图片
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

::v-deep .el-tabs__item.is-active {
  font-size: 18px;
  color: #000;
  font-weight: 700;
}

::v-deep .el-tabs__active-bar {
  background-color: #ff643d;
}
.block {
  display: flex;
  justify-content: center;
}
.purpleTore {
  padding-top: 20px;
}
.warningTwoShow {
  margin-top: 150px;
  margin-left: 500px;
}

::v-deep .el-col-10 {
  width: 33%;
}
</style>
